<template>
  <div class="user-message">
    <el-header>
      <el-select v-model="queryInfo.CharType" clearable placeholder="请选择查询类型" style="width: 200px;">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-input v-model="queryInfo.inputText" placeholder="请输入查询内容" clearable @clear="getEquipment()"
        style="width: 200px;"></el-input>
      <el-button type="primary" @click="getUser()" icon="el-icon-search">查询</el-button>
      <el-button type="success" @click="addShowInfo()" icon="el-icon-plus">新增</el-button>
      <el-button type="primary" @click="reset()" icon="el-icon-refresh-right">重置</el-button>
    </el-header>
    <el-main>
      <el-table ref='multipleTable' :data="userList" tooltip-effect="dark" style="width: 100%;">
        <el-table-column label="序号" align="center" width="80">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="用户账号" align="center" width="150">
          <template slot-scope="scope">{{ scope.row.username }}</template>
        </el-table-column>
        <el-table-column label="用户名称" align="center" width="150">
          <template slot-scope="scope">{{ scope.row.nickname }}</template>
        </el-table-column>
        <el-table-column label="性别" align="center" width="100">
          <template slot-scope="scope">{{ scope.row.sex }}</template>
        </el-table-column>
        <el-table-column label="家庭住址" align="center" width="200">
          <template slot-scope="scope">{{ scope.row.homeaddress }}</template>
        </el-table-column>
        <el-table-column label="邮箱" align="center" width="200">
          <template slot-scope="scope">{{ scope.row.email }}</template>
        </el-table-column>
        <el-table-column label="描述" align="center" width="200">
          <template slot-scope="scope">{{ scope.row.note }}</template>
        </el-table-column>
        <el-table-column label="类型" align="center" width="100">
          <template slot-scope="scope">{{ scope.row.type == 1 ? '管理员' : '普通用户' }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="text" style="color: #62a8ea;"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="text" style="color: #62a8ea;"
              @click="userDetail(scope.$index, scope.row)">详情</el-button>
            <el-button size="mini" type="text" style="color: #f56c6c;"
              @click="deleteUser(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :title="id ? '用户信息编辑' : '新增用户'" :visible.sync="dialogFormVisible">
        <el-form :model="userForm" label-position="right" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户账号">
                <el-input v-model="userForm.username" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户密码">
                <el-input v-model="userForm.password" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户名称">
                <el-input v-model="userForm.nickname" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-input v-model="userForm.sex" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="类型">
                <el-select v-model="userForm.type" placeholder="请选择">
                  <el-option label="管理员" value="1"></el-option>
                  <el-option label="普通用户" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="家庭住址">
                <el-input v-model="userForm.homeaddress" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="邮箱">
            <el-input v-model="userForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户描述">
            <el-input v-model="userForm.note" type="textarea" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
          <el-button v-if="id" type="primary" @click="editUser()">保 存</el-button>
          <el-button v-else type="primary" @click="addUser()">保 存</el-button>
          <el-button type="primary" @click="resetForm()">重置</el-button>
        </div>
      </el-dialog>
      <el-dialog title="用户信息查看" :visible.sync="dialogVisible">
        <el-form :model="userForm" label-position="right" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户账号">
                <el-input v-model="userForm.username" readonly autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户密码">
                <el-input v-model="userForm.password" readonly autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户名称">
                <el-input v-model="userForm.nickname" readonly autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-input v-model="userForm.sex" readonly autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="类型">
                <el-select v-model="userForm.type" readonly placeholder="请选择">
                  <el-option label="管理员" value="1"></el-option>
                  <el-option label="普通用户" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="家庭住址">
                <el-input v-model="userForm.homeaddress" readonly autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="邮箱">
            <el-input v-model="userForm.email" readonly autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户描述">
            <el-input v-model="userForm.note" readonly type="textarea" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
        </div>
      </el-dialog>
      <pagination style="text-align: right; margin-top: 20px;" :page="queryInfo.currPage" :componentTotal="userTotal"
        @changeRows="setRows" @changePage="setPage"></pagination>
    </el-main>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  data() {
    return {
      queryInfo: {
        CharType: '',
        inputText: '',
        type: 2,
        pageNum: 10,
        currPage: 0
      },
      userForm: {
        u_id: '',
        username: '',
        password: '',
        nickname: '',
        sex: '',
        homeaddress: '',
        type: '',
        email: '',
        note: '',
        token: sessionStorage.token
      },
      id: '',
      formLabelWidth: '120px',
      dialogFormVisible: false,
      dialogVisible: false,
      userList: [],
      userTotal: 0,
      types: [
        { value: 1, label: '管理员' },
        { value: 2, label: '普通用户' }
      ],
      statusOptions: [
        { value: 'username', label: '用户账号' },
        { value: 'nickname', label: '用户名称' },
        { value: 'homeaddress', label: '家庭住址' },
        { value: 'sex', label: '性别' },
        { value: 'email', label: '邮箱' }
      ],
      // loading: false
    }
  },
  mounted() {
    this.getUser();
  },
  components: {
    Pagination
  },
  methods: {
    // 分页器
    setRows(val) {
      this.queryInfo.pageNum = val;
      this.getUser();
    },
    setPage(val) {
      this.queryInfo.currPage = val;
      this.getUser();
    },
    addShowInfo() {
      this.dialogFormVisible = true;
      this.resetForm();
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.id = row.id;
      console.log(this.id);
      this.userForm.u_id = this.id;
      this.userForm.username = row.username;
      this.userForm.password = row.password;
      this.userForm.nickname = row.nickname;
      this.userForm.sex = row.sex;
      this.userForm.homeaddress = row.homeaddress;
      this.userForm.type = row.type;
      this.userForm.email = row.email;
      this.userForm.note = row.note;
    },
    async editUser() {
      const { data: res } = await this.axios.post('/users/upUserData', this.userForm)
      console.log(res);
      this.dialogFormVisible = false;
      this.$message.success('编辑成功');
      this.getUser();
    },
    async deleteUser(index, row) {
      const { data: res } = await this.axios.get('/users/delUserData', {
        params: {
          u_id: row.id,
          token: sessionStorage.token
        },
        
      })
      console.log(res);
      this.$confirm('确认删除该用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功');
        this.getUser();
      }).catch(() => {
        this.$message.info('已取消删除');
      })

    },
    userDetail(index, row) {
      this.id = row.id;
      this.dialogVisible = true;
      this.userForm.u_id = row.id;
      this.userForm.username = row.username;
      this.userForm.password = row.password;
      this.userForm.nickname = row.nickname;
      this.userForm.sex = row.sex;
      this.userForm.homeaddress = row.homeaddress;
      this.userForm.type = row.type;
      this.userForm.email = row.email;
      this.userForm.note = row.note;

    },
    resetForm() {
      this.userForm.username = '';
      this.userForm.password = '';
      this.userForm.nickname = '';
      this.userForm.sex = '';
      this.userForm.homeaddress = '';
      this.userForm.type = '';
      this.userForm.email = '';
      this.userForm.note = '';
    },
    reset() {
      this.queryInfo.inputText = '';
      this.queryInfo.CharType = '';
    },
    async getUser() {
      // this.loading = true;
      const { data: res } = await this.$http.get('users/getUsersByTypePage', {
        params: {
          ...this.queryInfo
        }
      });
      console.log(res);
      this.userList = res.data;
      this.userTotal = res.total;
      // this.loading = false;
    },
    async addUser() {
      const { data: res } = await this.axios.post('/users/addUserData', this.userForm)
      console.log(res);
      this.dialogFormVisible = false;
      this.$message.success('新增成功');
      this.getUser();
    }
  }
};
</script>

<style scoped lang="scss">
.user-message {
  margin: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  height: 100%;

  .el-header {
    min-width: 1250px;
    background-color: #fff;
    margin: 10px;
    line-height: 40px;

    .el-input,
    .el-select {
      margin: 5px 20px;
    }

    .el-button {
      margin-left: 10px;
    }
  }

  .el-main {
    .el-table {
      margin-top: 20px;

      .el-table__header-wrapper {
        th {
          background-color: #f5f7fa;
          color: #606266;
          font-weight: bold;
        }
      }

      .el-table__body-wrapper {
        td {
          text-align: center;
        }
      }
    }

    .el-pagination {
      margin-top: 20px;
      text-align: right;
    }
  }

  .el-dialog {
    .el-form {
      .el-row {
        margin-bottom: 20px;
      }

      .el-form-item {
        margin-bottom: 15px;
      }
    }
  }
}
</style>